<template>
	<view class="vip-page">
		<u-navbar :title="$t('hhh.t161')" :autoBack="false" bg-color="transparent" leftIconColor="#ffffff"
			:titleStyle="{'color':'#ffffff'}" @leftClick="leftClick"></u-navbar>
		<u-gap height="150" bgColor="transparent"></u-gap>

		<view class="vip-info flex mx-auto px-3 box-sizing position-relative mx-3 pt-4">
			<image :src="getUser.logo" mode="aspectFill" class="w-96 h-96 mr-2 rounded-circle bg110124"></image>
			<view class="flex flex-column flex-1">
				<text class="ftFFE9C8 fs-32 font-weight-bold mb-2">{{getUser.nickname || '--'}}</text>
				<view class="ftCFBF9F fs-20 font-weight-bold">{{$t('hhh.t162')}}</view>
			</view>
			<image class="position-absolute bottom-0 right-0 mb-8" src="/static/imgs/vipbh.png" mode="aspectFill"
				style="width: 180rpx;height: 168rpx;"></image>
		</view>

		<u-gap height="100" bgColor="transparent"></u-gap>
		<view class="gradient-text text-center fs-34 font-weight-bold">{{$t('hhh.t163')}}</view>
		<u-gap height="80" bgColor="transparent"></u-gap>

		<view class="mx-3 flex flex-column">
			<view class="flex align-center w-100">
				<view class="vip-item flex flex-column mb-4 p-2 box-sizing w-32bf">
					<image src="/static/imgs/vip_img1.png" mode="aspectFill" style="width: 88rpx;height: 88rpx;"></image>
					<view class="gradient-text fs-24 mt-2">{{$t('hhh.t164')}}</view>
				</view>
				<view class="vip-item flex flex-column mx-4 mb-4 p-2 box-sizing w-32bf">
					<image src="/static/imgs/vip_img2.png" mode="aspectFill" style="width: 88rpx;height: 88rpx;"></image>
					<view class="gradient-text fs-24 mt-2">{{$t('hhh.t165')}}</view>
				</view>
				<view class="vip-item flex flex-column mb-4 p-2 box-sizing w-32bf">
					<image src="/static/imgs/vip_img3.png" mode="aspectFill" style="width: 88rpx;height: 88rpx;"></image>
					<view class="gradient-text fs-24 mt-2">{{$t('hhh.t166')}}</view>
				</view>
			</view>
			<view class="flex align-center">
				<view class="vip-item flex flex-column mb-4 p-2 box-sizing w-32bf">
					<image src="/static/imgs/vip_img4.png" mode="aspectFill" style="width: 88rpx;height: 88rpx;"></image>
					<view class="gradient-text fs-24 mt-2">{{$t('hhh.t167')}}</view>
				</view>
				<view class="vip-item flex flex-column mx-4 mb-4 p-2 box-sizing w-32bf">
					<image src="/static/imgs/vip_img5.png" mode="aspectFill" style="width: 88rpx;height: 88rpx;"></image>
					<view class="gradient-text fs-24 mt-2">{{$t('hhh.t168')}}</view>
				</view>
			</view>
		</view>

		<u-gap height="80" bgColor="transparent"></u-gap>
		<view class="bglg12 rounded-circle flex align-center text-black pl-3 pr-1 mx-3" style="height: 112rpx;">
			<text class="fs-32">$</text>
			<text class="fs-44 ml-1">29.9</text>
			<text class="fs-32 flex-1 ml-2">/{{$t('hhh.t169')}}</text>
			<view class="bg110124 rounded-circle text-white h-88 px-3 flex align-center justify-center" @tap="payShow = true">
				{{getUser.is_vip !== 0? $t('hhh.t190'):$t('hhh.t170')}}
			</view>
		</view>
		<u-gap height="80" bgColor="transparent"></u-gap>

		<u-modal :show="payShow" :title="$t('hhh.t189')" :showCancelButton="true" :cancelText="$t('hhh.t26')"
			:confirmText="$t('hhh.t24')" @cancel="payShow = false" @confirm="submitFn">
			<view class="fs-32 text-center pt-5">{{$t('hhh.t188')}}</view>
		</u-modal>
	</view>
</template>

<script>
	import {
		mapGetters
	} from 'vuex'
	import HttpApi from '@/api/httpApi';
	export default {
		data() {
			return {
				payShow: false
			}
		},
		computed: {
			...mapGetters(['getUser'])
		},
		methods: {
			submitFn() {
				HttpApi.vipBuy().then(res => {
					if (res.code === 1) {
						uni.showToast({
							title: this.$t('hhh.t187')
						})
						this.userInfo()
					}
				}).finally(() => {
					this.payShow = false
				})
			},
			userInfo() {
				HttpApi.userInfo().then(res => {
					if (res.code === 1) {
						this.$store.commit('setUser', res.data)
					}
				})
			},
		}
	}
</script>

<style lang="scss">
	.vip-page {
		min-height: 100dvh;
		background-image: url('/static/imgs/vipbg.png');
		background-size: cover;
		background-repeat: no-repeat;
		background-position: center top;

		.vip-info {
			height: 200rpx;
			background-image: url('/static/imgs/vipbg2.png');
			background-size: 100% 100%;
			background-repeat: no-repeat;
			background-position: center top;
		}

		.gradient-text {
			background: linear-gradient(0deg, #FFF3C8 0%, #E2C09B 100%);
			/* 定义渐变颜色 */
			-webkit-background-clip: text;
			/* 将背景裁剪到文本区域 */
			background-clip: text;
			-webkit-text-fill-color: transparent;
			/* 文本颜色设为透明 */
			text-fill-color: transparent;
		}

		.vip-item {
			// width: 202rpx;
			height: 242rpx;
			background-image: url('/static/imgs/vipbg3.png');
			background-size: 100% 100%;
			background-repeat: no-repeat;
			background-position: center top;
		}
	}
</style>